<template>
  <div class="app-container">
    <template v-if="!isStudenShow">
      <!--工具栏-->
      <div class="head-container">
        <div v-if="crud.props.searchToggle">
          <div class="head-container">
            <el-input
              v-model="query.storeName"
              style="width: 200px;"
              class="filter-item"
              placeholder="机构名称"
              size="normal"
              clearable
            />
            <el-select
              v-model="query.status"
              class="filter-item"
              value-key=""
              placeholder=""
              clearable
              filterable
              @change=""
            >
              <el-option
                v-for="item in dict.initiate_study_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <rrOperation />
          </div>
        </div>
        <crudOperation :permission="permission" />
      </div>
      <!--表单组件-->
      <el-dialog
        append-to-body
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="1200px"
      >
        <el-form ref="form" :model="form" :inline="true" :rules="rules" size="small" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="文创名称" prop="goodsName">
                <el-input v-model="form.goodsName" style="width: 220px;" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="目标人群" prop="aimPeople">
                <el-input v-model="form.aimPeople" style="width: 220px;" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="商品售价" prop="price">
                <el-input v-model.number="form.price" style="width: 220px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="猛士价格" prop="fiercePrice">
                <el-input v-model.number="form.fiercePrice" style="width: 220px;" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="斗士价格" prop="fighterPrice">
                <el-input v-model.number="form.fighterPrice" style="width: 220px;" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="王者价格" prop="kingPrice">
                <el-input v-model.number="form.kingPrice" style="width: 220px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker v-model="form.startTime" type="date" placeholder="选择日期时间" style="width: 220px;">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="开始时间" prop="endTime">
                <el-date-picker v-model="form.endTime" type="date" placeholder="选择日期时间" style="width: 220px;">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="联系人">
                <el-input v-model.number="form.studyContacts" style="width: 220px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="联系电话">
                <el-input v-model.number="form.studyMobile" style="width: 220px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="封面图" prop="coverImage">
            <el-upload
              v-loading="coverImage_loading"
              class="avatar-uploader el-upload"
              action="https://jsonplaceholder.typicode.com/posts/"
              :http-request="(params) => uploadRequest(params, 'coverImage')"
              :show-file-list="false"
            >
              <img v-if="form.coverImage" :src="form.coverImage" class="avatar" />
              <div v-else class="upload-text">选择图片</div>
              <div class="btn" v-if="form.coverImage">
                <el-button
                  size="36"
                  type="text"
                  icon="el-icon-delete"
                  @click.stop="deleteImg('coverImage')"
                ></el-button>
              </div>
            </el-upload>
            <el-input v-show="false" v-model="form.coverImage" />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="详情图" prop="detailImage">
                <el-upload
                  v-loading="coverImage_loading"
                  class="avatar-uploader el-upload"
                  v-for="(item, index) in detailList"
                  :key="index"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :http-request="(params) => uploadDetailRequest(params, 'detailList', 'detailImage')"
                  :show-file-list="false"
                >
                  <img v-if="item.url" :src="item.url" class="avatar" />
                  <div v-else class="upload-text">选择图片</div>
                  <div class="btn" v-if="item.url" @click.stop="deleteImg1('detailList', item.url)">
                    <el-button size="36" type="text" icon="el-icon-delete"></el-button>
                  </div>
                </el-upload>
                <el-upload
                  v-loading="coverImage_loading"
                  class="avatar-uploader el-upload"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :http-request="(params) => uploadDetailRequest(params, 'detailList', 'detailImage')"
                  :show-file-list="false"
                >
                  <div class="upload-text">选择图片</div>
                </el-upload>
                <el-input v-show="false" v-model="form.detailImage" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="轮播图" prop="showImage">
                <el-upload
                  v-loading="coverImage_loading"
                  class="avatar-uploader el-upload"
                  v-for="(item, index) in bannerList"
                  :key="index"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :http-request="(params) => uploadDetailRequest(params, 'bannerList', 'showImage')"
                  :show-file-list="false"
                >
                  <img v-if="item.url" :src="item.url" class="avatar" />
                  <div v-else class="upload-text">选择图片</div>
                  <div class="btn" v-if="item.url" @click.stop="deleteImg('coverImage')">
                    <el-button size="36" type="text" icon="el-icon-delete"></el-button>
                  </div>
                </el-upload>
                <el-upload
                  v-loading="coverImage_loading"
                  class="avatar-uploader el-upload"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :http-request="(params) => uploadDetailRequest(params, 'bannerList', 'showImage')"
                  :show-file-list="false"
                >
                  <div class="upload-text">选择图片</div>
                </el-upload>
                <el-input v-show="false" v-model="form.showImage" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="展示地址" prop="addressInfo" style="width: 100%;">
            <el-input v-model="form.addressInfo" type="textarea" :rows="4" style="width: 900px;" />
          </el-form-item>
          <el-form-item label="师训地址" prop="studyAddress" style="width: 100%;">
            <el-input v-model="form.studyAddress" type="textarea" :rows="4" style="width: 900px;" />
          </el-form-item>
          <el-form-item label="简介" prop="goodsInfo" style="width: 100%;">
            <el-input v-model="form.goodsInfo" type="textarea" :rows="4" style="width: 900px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="id" width="60" />
        <el-table-column prop="coverImage" label="研学封面">
          <template slot-scope="scope">
            <img :src="scope.row.coverImage" style="width: 100px;height: 100px;object-fit: cover;" />
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="研学项目名称" />
        <el-table-column prop="storeName" label="机构名称" />
        <el-table-column prop="projectDate" label="研学日期" />
        <el-table-column label="研学周期">
          <template slot-scope="scope">
            {{ scope.row.startTime }} - {{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="virtuallyAmount" label="招生人数">
          <template slot-scope="scope">
            <span> {{ scope.row.limitAmount }} / {{ scope.row.nowAmount }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态状态">
          <template slot-scope="scope">
            <el-tag type="primary" effect="dark" v-if="scope.row.status == 1">报名中</el-tag>
            <el-tag type="warning" effect="dark" v-if="scope.row.status == 2">进行中</el-tag>
            <el-tag type="info" effect="dark" v-if="scope.row.status == 3">已结束</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          v-if="checkPer(['admin', 'serverDeploy:edit', 'serverDeploy:del'])"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="{ row }">
            <!-- <udOperation :data="scope.row" :permission="permission" /> -->
            <el-button type="text" size="mini" @click="toStudent(row)">项目学员</el-button>
            <el-button type="text" size="mini" @click="toFengcai(row)">团队风采</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </template>
    <studentpage v-else :project="project" @close="isStudenShow = false" />
    <el-dialog append-to-body title="项目风采" :visible.sync="isFengcaiShow" width="70%">
      <fengcaipage v-if="isFengcaiShow" :projectid="project.id" />
    </el-dialog>
  </div>
</template>

<script>
import crudTeacherTrain from "@/api/mini/teacherTrain";
import { uploadFile } from "@/api/data";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
import studentpage from "./studentpage";
import fengcaipage from "./fengcaipage";
const defaultForm = { title: "", type: "", ifShow: "", limitAmount: "", sort: "", coverImage: "", content: "" };
export default {
  name: "initiateStudy",
  dicts: ["initiate_study_status"],
  components: { pagination, crudOperation, rrOperation, udOperation, studentpage, fengcaipage },
  cruds() {
    return CRUD({
      title: "研学产品",
      url: "/api/project/storeProjectList",
      listMethod: "post",
      listKey: ["data", "list"],
      totalKey: ["data", "total"],
      crudMethod: { ...crudTeacherTrain },
      query: { type: 1 },
      optShow: {},
    });
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],

  data() {
    return {
      accountList: [],
      accountMap: {},
      loading: false,
      coverImage_loading: false,
      detailList: [],
      bannerList: [],
      permission: {
        add: ["admin", "proportion:add"],
        edit: ["admin", "proportion:edit"],
        del: ["admin", "proportion:del"],
      },
      rules: {
        goodsName: [{ required: true, message: "请输入师训名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品售价", trigger: "blur" }],
        fiercePrice: [{ required: true, message: "请输入猛士价格", trigger: "blur" }],
        fighterPrice: [{ required: true, message: "请输入斗士价格", trigger: "blur" }],
        kingPrice: [{ required: true, message: "请输入王者价格", trigger: "blur" }],
        startTime: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
        endTime: [{ required: true, message: "请选择结束时间", trigger: "blur" }],
        studyContacts: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        studyMobile: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        studyEmail: [{ required: true, message: "请输入联系邮箱", trigger: "blur" }],
        studyAddress: [{ required: true, message: "请输入联系地址", trigger: "blur" }],
        addressInfo: [{ required: true, message: "请输入展示地址", trigger: "blur" }],
        // goodsInfo: [{ required: true, message: '请输入简介', trigger: 'blur' }],
        coverImage: [{ required: true, message: "请上传封面图", trigger: "blur" }],
        detailImage: [{ required: true, message: "请上传详情图", trigger: "blur" }],
        showImage: [{ required: true, message: "请上传轮播图", trigger: "blur" }],
        aimPeople: [{ required: true, message: "请输入目标人群", trigger: "blur" }],
      },
      isStudenShow: false,
      isFengcaiShow: false,
      project: {},
    };
  },
  methods: {
    toStudent(row) {
      this.isStudenShow = true;
      this.project = {
        id: row.id,
        name: row.projectName,
      };
    },
    toFengcai(row) {
      this.isFengcaiShow = true;
      this.project = {
        id: row.id,
        name: row.projectName,
      };
    },
    detailImgchange() {
      console.log("this.fileList :>> ", this.fileList);
    },

    uploadRequest(params, key) {
      console.log("params :>> ", params);
      this[`${key}_loading`] = true;
      uploadFile(params).then((res) => {
        console.log("res :>> ", res);
        this[`${key}_loading`] = false;
        this.form[key] = res.data;
        this.$set(this.form, key, res.data);
      });
    },
    uploadDetailRequest(params, listKey, key) {
      uploadFile(params).then((res) => {
        this[listKey].push({ name: params.file.name, url: res.data });
        this.form[key] = this[listKey].map((item) => item.url).join(",");
      });
    },

    deleteImg(key) {
      this.form[key] = "";
    },
    deleteImg1(key, url) {
      this[key] = this[key].filter((x) => x.url != url);
    },
    changeStatus(status, row) {
      this.$confirm("确定要修改上架状态吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          crudTeacherTrain.changeSxInfoStatus(row.id).then((res) => {
            this.$message.success("修改成功");
            this.crud.toQuery();
          });
        })
        .catch(() => {
          row.status = !status;
        });
    },

    // 新增编辑前做的操作
    [CRUD.HOOK.beforeToCU](crud, form) {
      this.bannerList = form.showImage ? form.showImage.split(",").map((url) => ({ url })) : [];
      this.detailList = form.detailImage ? form.detailImage.split(",").map((url) => ({ url })) : [];
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

.avatar-uploader,
.el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px !important;
  height: 178px;
  display: inline-block;
}

.avatar-uploader:hover,
.el-upload:hover {
  border-color: #409eff;
}

.upload-text {
  font-size: 14px;
  color: #8c939d;
  line-height: 178px;
  text-align: center;
  margin: 0 auto;
}

.avatar {
  width: 178px;
  height: 178px;
  display: inline-block;
  object-fit: cover;
}
.btn {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 178px !important;
  height: 178px;
  border-radius: 0 6px 0 6px;
  text-align: center;
  line-height: 178px;
}

.avatar-uploader:hover {
  // 鼠标悬浮显示按钮
  .btn {
    display: block;
  }
}
</style>
